博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS动态引入js,CSS——动态创建script/link/style标签
阅读量:4124 次
发布时间:2019-05-25

本文共 1414 字,大约阅读时间需要 4 分钟。

一.动态创建link方式

我们可以使用link的方式.如下代码所示.

function addCssByLink(url){	var doc=document;	var link=doc.createElement("link");	link.setAttribute("rel", "stylesheet");    link.setAttribute("type", "text/css");    link.setAttribute("href", url);	var heads = doc.getElementsByTagName("head");	if(heads.length)		heads[0].appendChild(link);	else		doc.documentElement.appendChild(link);}

 

二.动态创建style方式

但是,这样的话,需要加载整个css文件,但是那样有可能浪费一个http请求并占用一个服务器请求数,并等待上一段下载时间,所以,Firebug Lite采取的是将css代码写在js中,然后动态创建style标签的方法,正如下面所示

function addCssByStyle(cssString){	var doc=document;	var style=doc.createElement("style");	style.setAttribute("type", "text/css");	if(style.styleSheet){// IE		style.styleSheet.cssText = cssString;	} else {// w3c		var cssText = doc.createTextNode(cssString);		style.appendChild(cssText);	}	var heads = doc.getElementsByTagName("head");	if(heads.length)		heads[0].appendChild(style);	else		doc.documentElement.appendChild(style);}

这样的话,如果是较少的代码,可以比较方便的实现到动态加载css的效果,但是如果为了方便维护和管理,并没有等待时间限制,使用link方式更加合适

三.动态创建script方式

var script=document.createElement("script");script.setAttribute("type", "text/javascript");script.setAttribute("src", "JustWalking.js");var heads = document.getElementsByTagName("head");if(heads.length)	heads[0].appendChild(script);else	document.documentElement.appendChild(script);

但是这种方式在IE内核的浏览器中支持,在google、360极速、firefox下却不行

四.打印引入style方式

 

document.write("
");

五.打印引入js方式

document.write("");

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载地址:http://felpi.baihongyu.com/

你可能感兴趣的文章
Spring Boot JWT Token 认证 (JAVA WEB TOKEN)
查看>>
HashMap的的实现原理
查看>>
Springboot 整合ActiveMQ 消息发布和订阅
查看>>
SpringBoot项目集成sentinel降级快速失败
查看>>
对java文件头的解析
查看>>
Java 基本功 (基础概念与常识)
查看>>
深入理解硬盘原理,Mysql索引底层数据结构与算法的来龙去脉(多图)
查看>>
深入理解硬盘原理,Mysql索引底层数据结构与算法的来龙去脉(多图)
查看>>
MyBatis动态SQL(认真看看, 以后写SQL就爽多了)
查看>>
面试常问题:为什么要使用MQ消息中间?
查看>>
这10道springboot常见面试题你需要了解下
查看>>
JDK 从老版本升级到 1.8的问题总结
查看>>
一文彻底弄懂如何选择抽象类还是接口
查看>>
这是一篇来源于阿里内部技术论坛的文章
查看>>
公司线上虚拟机大量GC导致STW和CPU飙升--抽丝剥茧定位的过程
查看>>
如何快速创建百万级测试数据
查看>>
请勿过度依赖Redis的过期监听!!
查看>>
JAVA构造函数没有返回值是怎么赋值的?
查看>>
Docker之两小时入门
查看>>
JAVA并发之基础概念
查看>>